<template>
  <footer class="bg-gray-800 text-white py-6 mt-auto">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <h3 class="text-lg font-semibold mb-4">关于我们</h3>
          <p class="text-gray-400 text-sm">
            我们致力于提供高质量的前端开发示例，帮助开发者快速掌握现代Web开发技术。
          </p>
        </div>

        <div>
          <h3 class="text-lg font-semibold mb-4">快速链接</h3>
          <ul class="space-y-2 text-gray-400">
            <li><a href="#" class="hover:text-white transition-colors">首页</a></li>
            <li><a href="#" class="hover:text-white transition-colors">关于我们</a></li>
            <li><a href="#" class="hover:text-white transition-colors">服务项目</a></li>
            <li><a href="#" class="hover:text-white transition-colors">联系我们</a></li>
          </ul>
        </div>

        <div>
          <h3 class="text-lg font-semibold mb-4">联系我们</h3>
          <div class="space-y-2 text-gray-400">
            <p class="flex items-center">
              <i class="fa fa-map-marker mr-2"></i>
              北京市朝阳区科技园A座1001室
            </p>
            <p class="flex items-center">
              <i class="fa fa-phone mr-2"></i>
              +86 10 8888 8888
            </p>
            <p class="flex items-center">
              <i class="fa fa-envelope-o mr-2"></i>
              contact@example.com
            </p>
          </div>
        </div>
      </div>

      <div class="mt-8 pt-6 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center">
        <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2025 版权所有</p>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-400 hover:text-white transition-colors">
            <i class="fa fa-weixin text-xl"></i>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors">
            <i class="fa fa-weibo text-xl"></i>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors">
            <i class="fa fa-github text-xl"></i>
          </a>
        </div>
      </div>
    </div>
  </footer>
</template>